fixing the input ui at certain endpoints causing the button to overflow. by shivamhwp · Pull Request #1574 · pingdotgg/t3code

shivamhwp · 2026-03-30T10:22:44Z

Move send, stop, and plan follow-up controls into a shared component
Add compact pending-question and implementation action variants to avoid overflow

origin - https://x.com/KevinVanCott/status/2038274360058753214

What Changed

Fixed a composer footer layout regression in plan-mode follow-up states after window resize.
Extracted the right-side composer action cluster into ComposerPrimaryActions so narrow-width behavior is explicit and testable.
Added compact fallbacks for overflow-prone actions:
- Pending question flow now collapses Previous to an icon in compact mode.
- Submit answers shortens to Submit in compact mode.
- Plan follow-up compact mode now uses separate rounded action pills instead of the fused split Implement button.
Updated the footer action container to allow wrapping instead of forcing a non-shrinking row.
Added focused tests for compact pending-question and plan-follow-up action states.

Why

Resizing the app could leave the composer footer in a state where the right-side action cluster was wider than the available space. The old layout combined several constraints that made overflow inevitable:

the right-side action area was non-shrinking,
buttons were non-wrapping,
wide labels like Submit answers and the split Implement button had no narrow fallback,
the layout depended on a heuristic breakpoint rather than guaranteeing a valid layout at any width.

This change fixes the root cause instead of just adjusting the breakpoint. The footer actions now have a true compact rendering path, so they still fit when the composer becomes narrow after resize.

UI Changes

Before:

Screen.Recording.2026-03-30.at.3.16.26.PM.mov

After:

Screen.Recording.2026-03-30.at.3.41.59.PM.mov

note: don't mind the lag, it's just my machine having low memory !!

Checklist

This PR is small and focused
I explained what changed and why
I included before/after screenshots for any UI changes
I included a video for animation/interaction changes

Note

Medium Risk
UI layout logic for the chat composer footer is now driven by DOM measurements and resize events, which could introduce edge-case regressions across browsers/viewports. Changes are isolated to the composer footer/action rendering and add targeted unit/browser tests to reduce risk.

Overview
Fixes chat composer footer action overflow after resizes by adding measurement-based compacting logic and separating footer compactness from primary-action compactness.

The right-side action cluster (send/stop, pending-question navigation, plan follow-up implement/refine) is extracted into a new ComposerPrimaryActions component with compact variants (shorter labels and icon-only previous). Footer layout helpers in composerFooterLayout.ts add overflow/fit calculations and update the wide-actions breakpoint, while browser tests in ChatView.browser.tsx simulate real container resizes to assert actions stay contained and the slash menu remains visible.

^{Written by Cursor Bugbot for commit 4381d82. This will update automatically on new commits. Configure here.}

Note

Fix composer footer button overflow at narrow viewport widths

Replaces inline primary action rendering in ChatView.tsx with a new ComposerPrimaryActions component that supports a compact prop
Adds layout measurement logic using ResizeObserver and new helpers in composerFooterLayout.ts to independently compact either the full footer or only the primary actions based on measured overflow
Raises COMPOSER_FOOTER_WIDE_ACTIONS_COMPACT_BREAKPOINT_PX from 720px to 780px and introduces COMPOSER_PRIMARY_ACTIONS_COMPACT_BREAKPOINT_PX at the same threshold
In compact mode during pending questions, action labels shorten to 'Next'/'Submit'; the leading section gains horizontal scrolling
Adds browser tests asserting action buttons remain visually contained within the footer across resizes and viewport sizes

^{Macroscope summarized 9f17470.}

- Move send, stop, and plan follow-up controls into a shared component - Add compact pending-question and implementation action variants to avoid overflow

coderabbitai · 2026-03-30T10:22:53Z

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: c13e9257-98b0-4863-97c7-b33a1c422dbf

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

apps/web/src/components/chat/ComposerPrimaryActions.tsx

- Raise the wide-actions compact threshold - Force compact mode when footer content no longer fits - Keep composer actions on one line and add fit tests

apps/web/src/components/composerFooterLayout.ts

- measure footer content width after padding - add overflow-based compactness heuristic - update tests for footer layout behavior

apps/web/src/components/chat/ComposerPrimaryActions.test.tsx

- add browser tests for pending input and plan follow-up footers - mark composer footer/action compact state for layout assertions - remove redundant ComposerPrimaryActions snapshot tests

apps/web/src/components/composerFooterLayout.test.ts

- Update the test description to reflect that minor overflow stays expanded when primary actions can compact - Preserve the intended composer footer layout behavior

# Conflicts: # apps/web/src/components/ChatView.browser.tsx

apps/web/src/components/ChatView.tsx

- Remove composer overflow clipping so slash-command items can render and receive pointer events - Add a browser test covering menu visibility and hit target above the composer

- Fuse implement actions into a single responsive control - Preserve model picker alignment and add regression coverage

cursor

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

apps/web/src/components/chat/ProviderModelPicker.tsx

- Preserve compact composer behavior at narrower widths - Tweak provider model picker spacing to avoid truncation

Extract compact composer primary actions

d6d55f8

- Move send, stop, and plan follow-up controls into a shared component - Add compact pending-question and implementation action variants to avoid overflow

github-actions bot added size:L 100-499 changed lines (additions + deletions). vouch:trusted PR author is trusted by repo permissions or the VOUCHED list. labels Mar 30, 2026

macroscopeapp bot reviewed Mar 30, 2026

View reviewed changes

apps/web/src/components/chat/ComposerPrimaryActions.tsx Show resolved Hide resolved

Tighten composer footer layout

d9ef0f8

- Raise the wide-actions compact threshold - Force compact mode when footer content no longer fits - Keep composer actions on one line and add fit tests

github-actions bot added size:XL 500-999 changed lines (additions + deletions). and removed size:L 100-499 changed lines (additions + deletions). labels Mar 30, 2026

cursor bot reviewed Mar 30, 2026

View reviewed changes

apps/web/src/components/composerFooterLayout.ts Outdated Show resolved Hide resolved

Split composer footer and primary actions compactness

00f28a6

- measure footer content width after padding - add overflow-based compactness heuristic - update tests for footer layout behavior

juliusmarminge reviewed Mar 30, 2026

View reviewed changes

apps/web/src/components/chat/ComposerPrimaryActions.test.tsx Outdated Show resolved Hide resolved

Add resize coverage for composer footer actions

52692ae

- add browser tests for pending input and plan follow-up footers - mark composer footer/action compact state for layout assertions - remove redundant ComposerPrimaryActions snapshot tests

cursor bot reviewed Mar 30, 2026

View reviewed changes

apps/web/src/components/composerFooterLayout.test.ts Show resolved Hide resolved

shivamhwp added 3 commits March 31, 2026 00:54

Clarify compact footer fit behavior

21c8a21

- Update the test description to reflect that minor overflow stays expanded when primary actions can compact - Preserve the intended composer footer layout behavior

Merge branch 'main' into input-ui-fix

1ae6d13

Merge remote-tracking branch 'upstream/main' into input-ui-fix

2d67c81

# Conflicts: # apps/web/src/components/ChatView.browser.tsx

macroscopeapp bot reviewed Mar 31, 2026

View reviewed changes

apps/web/src/components/ChatView.tsx Show resolved Hide resolved

shivamhwp added 3 commits March 31, 2026 19:30

Keep slash menu visible above composer

dabf48d

- Remove composer overflow clipping so slash-command items can render and receive pointer events - Add a browser test covering menu visibility and hit target above the composer

Merge branch 'main' into input-ui-fix

2150741

Keep composer actions aligned across resize

fbf74fe

- Fuse implement actions into a single responsive control - Preserve model picker alignment and add regression coverage

cursor bot reviewed Apr 1, 2026

View reviewed changes

apps/web/src/components/chat/ProviderModelPicker.tsx Outdated Show resolved Hide resolved

shivamhwp added 2 commits April 1, 2026 06:54

Adjust chat composer compact layout

9f17470

- Preserve compact composer behavior at narrower widths - Tweak provider model picker spacing to avoid truncation

Merge branch 'main' into input-ui-fix

4381d82

juliusmarminge merged commit 0bc94bc into pingdotgg:main Apr 1, 2026
11 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fixing the input ui at certain endpoints causing the button to overflow. #1574

fixing the input ui at certain endpoints causing the button to overflow. #1574
juliusmarminge merged 12 commits intopingdotgg:mainfrom
shivamhwp:input-ui-fix

shivamhwp commented Mar 30, 2026 •

edited by macroscopeapp bot

Loading

Uh oh!

coderabbitai bot commented Mar 30, 2026 •

edited

Loading

Review skipped

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cursor bot left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

shivamhwp commented Mar 30, 2026 • edited by macroscopeapp bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What Changed

Why

UI Changes

Checklist

Fix composer footer button overflow at narrow viewport widths

Uh oh!

coderabbitai bot commented Mar 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cursor bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

shivamhwp commented Mar 30, 2026 •

edited by macroscopeapp bot

Loading

coderabbitai bot commented Mar 30, 2026 •

edited

Loading